<!-- 检测叫号 -->
<template>
	<view class="box">
		<view class="top">
			<view class="change">
				<text>楼栋</text>
				<view @click="selectFloor()" :class="floorName ? 'on':''">{{floorName ? floorName : '请选择楼栋'}}</view>
			</view>
			<view class="change">
				<text>单元</text>
				<view @click="selectUnit()" :class="unitNum ? 'on':''">{{unitNum ? unitNum : '请选择单元'}}</view>
			</view>
		</view>
		<view class="center">
			<scroll-view scroll-y class="floor-list" v-if="hasLayer">
				<view class="item" v-for="(item,index) in layerNum" :key="index" @click="lookLayer(item)"
					:class="currentLayer == item ? 'on' : ''">{{item}}层</view>
			</scroll-view>
			<view class="room-list" :class="hasLayer ? 'has-data':''">

				<view class="item" v-for="(item,index) in roomList" :key="index" :id="item.layerId">
					<view class="title">
						<u-checkbox @change="changeRoom(item)" v-model="item.checked">{{item.roomName}}</u-checkbox>
					</view>

					<view class="people-list">
						<view class="people-item" v-for="(user,i) in item.users" :key="i"
							:class="user.state == 1 ? 'red' : user.state == 2 ? 'green': user.checked ? 'on' : ''"
							@click="changeUser(item,user)">
							{{user.userName}}
						</view>
					</view>
				</view>

				<noData :noDataText="noDataText" v-if="!hasData" :buttonShow="false"></noData>

			</view>
		</view>
		<view class="bottom">
			<view class="people" @click="onChangeUser()">
				<u-icon name="account-fill" color="#2979ff" size="28"></u-icon>
				<text class="lable">已选</text>
				<text class="main">{{changeUsers.length}}人</text>
			</view>
			<view class="test-place" @click="onTestPlace()">
				<u-icon name="map-fill" color="#2979ff" size="28"></u-icon>
				<text class="main" v-if="testPlaceName">{{testPlaceName}}</text>
				<text v-else class="lable">选择检测点</text>
			</view>
			<view class="submit" @click="submit()">提交</view>
		</view>

		<u-toast ref="uToast" />

		<u-picker mode="selector" v-model="floorShow" :default-selector="[0]" :range="floorList" @confirm="confirmFloor"
			range-key="floorName"></u-picker>

		<u-picker mode="selector" v-model="unitShow" :default-selector="[0]" :range="unitList" @confirm="confirmUnit"
			range-key="unitNum"></u-picker>

		<view class="mask" v-if="maskShow"></view>

		<u-popup v-model="changeShow" mode="bottom" border-radius="8">
			<scroll-view scroll-y="true" style="height: 50vh;">
				<view v-for="(item,index) in changeUsers" :key="index" class="user-item">
					<view class="name">{{item.userName}}</view>
					<view class="room">{{item.roomName}}</view>
					<view class="delete" @click="deleteUser(item)">
						<u-icon name="minus-circle-fill" color="#fa3534" size="48"></u-icon>
					</view>
				</view>
			</scroll-view>
		</u-popup>

		<u-picker mode="selector" v-model="testPlaceShow" :default-selector="[0]" :range="testPlaceList"
			@confirm="confirmtestPlace" range-key="name"></u-picker>
	</view>

</template>

<script>
	import {
		getQueryFloors,
		getQueryUnits
	} from "@/api/common"
	import {
		saveNucleicUser,
		updateNucleicUser,
		deleteNucleicUser,
		queryNucleicUser,
		queryNucleicSite,
		saveNucleicLog
	} from '@/api/nucleic.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				maskShow: false, // 是否显示遮罩

				floorList: [],
				floorId: '',
				floorName: '',
				floorShow: false,

				unitList: [],
				unitId: '',
				unitNum: '',
				unitShow: false,

				layerNum: [], // 楼层
				currentLayer: '0', // 当前选中楼层 苦思量

				addRegisterFn: false,

				// 页面数据
				hasData: false,
				hasLayer: false,
				roomList: [],
				noDataText: '暂无检测人员，请先选择楼栋单元。',

				changeUsers: [], // 被选中的人员
				changeShow: false,

				testPlaceList: [], // 检测点列表
				testPlaceShow: false,
				testPlaceName: '',
				nucleicSiteId: '',
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onShow(option) {
			if (this.addRegisterFn) {
				this.queryNucleicUser()
				this.addRegisterFn = false
			}
		},
		onLoad() {
			this.getLoadData()
			this.queryNucleicSite()
		},
		watch: {},
		methods: {
			/**
			 * 页面进入时，默认查看的数据
			 */
			getLoadData() {
				let self = this
				let floorParams = {
					communityId: this.userCommunity.communityId,
					page: 1,
					row: 100
				}
				getQueryFloors(floorParams).then((res) => {
					if (res.apiFloorDataVoList.length > 0) {
						self.floorList = res.apiFloorDataVoList

						self.floorName = res.apiFloorDataVoList[0].floorName
						self.floorId = res.apiFloorDataVoList[0].floorId

						let unitParams = {
							communityId: self.userCommunity.communityId, //小区编号
							floorId: self.floorId,
							name: '',
							page: 1,
							row: 100
						}
						getQueryUnits(unitParams).then((res) => {

							if (res.length > 0) {
								self.unitNum = res[0].unitNum
								self.unitId = res[0].unitId
								for (let n = 0; n < Number(res[0].layerCount); n++) {
									self.layerNum.push(n + 1)
								}

								self.queryNucleicUser()
							}
						}).catch(function(reason) {

						})
					}
				}).catch(function(reason) {

				})
			},
			/**
			 * 楼栋
			 */
			selectFloor() {
				this.queryFloor()
			},
			queryFloor() {
				let params = {
					communityId: this.userCommunity.communityId,
					page: 1,
					row: 100
				}
				getQueryFloors(params).then((res) => {


					if (res.apiFloorDataVoList.length > 0) {
						this.floorList = res.apiFloorDataVoList
						this.floorShow = true
					} else {
						this.$refs.uToast.show({
							title: '该小区暂未添加楼栋',
							type: 'default',
							icon: false
						})
					}

				}).catch(function(reason) {

				})
			},
			confirmFloor(e) {
				let i = e[0]
				this.floorName = this.floorList[i].floorName
				this.floorId = this.floorList[i].floorId
				this.unitList = []
				this.unitId = ''
				this.unitNum = ''
			},
			/**
			 * 单元
			 */
			selectUnit() {
				if (!this.floorName) {
					uni.showToast({
						title: "请选择楼栋",
						icon: 'none',
						duration: 1500
					})
					return
				}

				this.queryUnit()
			},
			queryUnit() {
				let params = {
					communityId: this.userCommunity.communityId, //小区编号
					floorId: this.floorId,
					name: '',
					page: 1,
					row: 100
				}
				getQueryUnits(params).then((res) => {
					if (res.length > 0) {
						this.unitList = res
						this.unitShow = true
					} else {
						this.$refs.uToast.show({
							title: '该楼栋暂未添加单元',
							type: 'default',
							icon: false
						})
					}
				}).catch(function(reason) {

				})
			},
			confirmUnit(e) {
				let i = e[0]
				this.unitNum = this.unitList[i].unitNum
				this.unitId = this.unitList[i].unitId
				this.layerNum = []

				if (this.unitList[i].layerCount > 0) {
					this.hasLayer = true
					for (let n = 0; n < Number(this.unitList[i].layerCount); n++) {
						this.layerNum.push(n + 1)
					}
				}

				this.queryNucleicUser()
			},
			/**
			 * 选择层数
			 */
			lookLayer(item) {
				this.currentLayer = item
				let id = '#layer' + item
				console.log('id', id)
				if (!uni.createSelectorQuery().select(id)) return false
				uni.createSelectorQuery().select(id).boundingClientRect(data => { //目标位置的节点：类class或者id
					if (data.id) {
						uni.createSelectorQuery().select(".room-list").boundingClientRect(
							res => { //最外层盒子的节点：类class或者id
								console.log(res)
								uni.pageScrollTo({
									duration: 500, //过渡时间
									scrollTop: data.top - 60, //到达距离顶部的top值
									//scrollTop:data.top - res.top,//如果置顶
								})
							}).exec()
					}
				}).exec();
			},
			/**
			 * 登记核酸检测人员
			 */
			addRegister() {
				let data = {
					floorId: this.floorId,
					floorName: this.floorName,
					unitId: this.unitId,
					unitNum: this.unitNum,
				}

				uni.navigateTo({
					url: `/pages/nucleic/addRegister/addRegister?data=${JSON.stringify(data)}`
				})
			},
			/**
			 * 获取核酸检测人员列表
			 */
			queryNucleicUser() {
				let that = this
				const data = {
					communityId: this.userCommunity.communityId,
					floorId: this.floorId,
					unitId: this.unitId,
				}
				queryNucleicUser(data).then((res) => {
					this.roomList = []
					if (res.code == 0) {
						let data = res.data
						if (res.data.length > 0) {

							data.forEach((n, i) => {
								n.rooms.forEach((m, j) => {
									if (j == 0) {
										m['layerId'] = 'layer' + n.layer
									}
									m['checked'] = false
									this.roomList.push(m)

									m.users.forEach((a, b) => {
										a['checked'] = false
									})
								})
							})

							this.hasData = true
							this.checkedClass()
						} else {
							this.hasData = false
							this.noDataText = '该单元暂无检测人员。'
						}
					}
					console.log('roomList', this.roomList)
				}).catch(function(reason) {})
			},
			/**
			 * 选择房屋
			 */
			changeRoom(item) {
				if (item.checked) {
					item.checked = false
					item.users.forEach((a, i) => {
						if (a.state == 0) {
							a.checked = false
							this.changeUsers.splice(this.changeUsers.findIndex(item => item.id === a.id), 1)
						}
					})
				} else {
					item.checked = true
					item.users.forEach((a, i) => {
						if (a.state == 0) {
							if(!a.checked){
								a.checked = true
								this.changeUsers.push(a)
							}
						}
					})

				}
				console.log(this.changeUsers)
			},
			/**
			 * 选择检测人员
			 */
			changeUser(item, user) {
				let title = '该用户已通知'
				if(user.state == 2){
					title = '该用户已完成核酸检测'
				}
				
				if (user.state != 0) {
					this.$refs.uToast.show({
						title: title,
						type: 'default',
						icon: false
					})
					return
				}

				if (user.checked) {
					user.checked = false
					item.checked = false
					if (user.state == 0) {
						this.changeUsers.splice(this.changeUsers.findIndex(item => item.id === user.id), 1)
					}
				} else {
					user.checked = true
					let checkState = true
					item.users.forEach((n, i) => {
						if (n.state == 0) {
							if (!n.checked) {
								checkState = false
								return
							}
						}
					})

					item.checked = checkState
					this.changeUsers.push(user)
				}
				this.$forceUpdate()
			},
			/**
			 * 查看选中的用户
			 */
			onChangeUser() {
				if (this.changeUsers.length > 0) {
					this.changeShow = true
				} else {
					this.$refs.uToast.show({
						title: '暂未选中要通知的人员',
						type: 'default',
						icon: false
					})
				}
			},
			/**
			 * 移除选中用户
			 */
			deleteUser(user) {
				this.changeUsers.splice(this.changeUsers.findIndex(item => item.id === user.id), 1)

				this.roomList.forEach((item, index) => {
					item.users.forEach((n, i) => {
						if (n.id == user.id) {
							n.checked = false
							item.checked = false
						}
					})
				})

			},
			/**
			 * checked 样式修改
			 */
			checkedClass() {
				let self = this
				self.roomList.forEach((item, index) => {
					let checkState = false
					item.users.forEach((n, i) => {
						self.changeUsers.forEach((a, b) => {
							if (n.id == a.id) {
								n.checked = true
							}
						})

						if (n.state == 0) {
							checkState = true
							if (!n.checked) {
								checkState = false
							}
						}
					})

					item.checked = checkState
				})
			},
			/**
			 * 查询检测点
			 */
			onTestPlace() {
				if (this.testPlaceList.length > 0) {
					this.testPlaceShow = true
				} else {
					this.$refs.uToast.show({
						title: '该小区暂未添加检测点',
						type: 'default',
						icon: false
					})
				}
			},
			queryNucleicSite() {
				let params = {
					page: 1,
					row: 100,
					communityId: this.userCommunity.communityId
				}
				queryNucleicSite(params).then((res) => {
					if (res.code == 0) {
						this.testPlaceList = res.data
					}
				}).catch(function(reason) {

				})
			},
			confirmtestPlace(e) {
				let i = e[0]
				this.testPlaceName = this.testPlaceList[i].name
				this.nucleicSiteId = this.testPlaceList[i].id
			},
			/**
			 * 核酸叫号提交
			 */
			submit(){
				this.$refs.uToast.show({
					title: '核酸叫号提交中',
					type: 'default',
					icon: false
				})
				this.mask = true
				let UserIds = ''
				this.changeUsers.forEach((item,index)=>{
					UserIds = UserIds + item.id + ','
				})
				console.log(UserIds)
				let parmas = {
					nucleicSiteId:this.nucleicSiteId,
					nucleicUserIds:UserIds
				}
				
				saveNucleicLog(parmas).then((res)=>{
					if(res.code == 0){
						this.$refs.uToast.show({
							title: '核酸叫号成功',
							type: 'success',
						})
						this.queryNucleicUser()
						this.changeUsers = []
					}else if(res.code == 404){
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
					this.mask = false
				}).catch(function(reason){
					this.mask = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		padding-top: 96rpx;
	}

	.top {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 16rpx 32rpx;
		box-shadow: $nl-box-shadow-grey;

		.change {
			flex: 1;
			display: flex;
			align-items: center;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 28rpx;

			text {}

			view {
				flex: 1;
				margin-left: 16rpx;
				padding: 0 24rpx;
				background-color: #F3F3F3;
				border-radius: $nl-border-radius-main;
				color: #6f6f6f;
			}

			.on {
				color: $uni-color-primary;
			}
		}



		.change:nth-child(1) {
			margin-right: 40rpx;
		}
	}

	.center {
		display: flex;

		.floor-list {
			width: 140rpx;
			height: calc(100vh - 188rpx);
			position: fixed;
			left: 0;
			top: 96rpx;
			background-color: #FFFFFF;
			padding-bottom: 92rpx;


			.item {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				border-bottom: 2rpx solid #dcdcdc;
			}

			.item:active {
				background-color: #f9f9f9;
			}

			.on {
				color: #007aff;
				background-color: #E0F0FF;
			}


		}

		.room-list {
			width: 100%;
			padding: 24rpx 32rpx 92rpx;

			.item {
				background-color: #FFFFFF;
				border-radius: $nl-border-radius-main;
				box-shadow: $nl-box-shadow-grey;
				margin-bottom: 32rpx;

				.title {
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 32rpx;
					border-bottom: 2rpx solid #dcdcdc;
				}

				.people-list {
					padding: 16rpx 16rpx 0;

					.people-item {
						display: inline-block;
						border-radius: $nl-border-radius-main;
						border: 2rpx solid #dcdcdc;
						padding: 14rpx 32rpx;
						font-size: 28rpx;
						margin: 0 16rpx 20rpx;
					}

					.on {
						color: #FFFFFF;
						background-color: $nl-color-main;
					}

					.red {
						color: $uni-color-error;
						border: 2rpx solid $uni-color-error;
					}

					.green {
						color: $uni-color-success;
						border: 2rpx solid $uni-color-success;
					}
				}
			}
		}

		.has-data {
			width: calc(100% - 140rpx);
			margin-left: 140rpx;
		}
	}



	.bottom {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 16rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		box-shadow: $nl-box-shadow-grey;
		font-size: 28rpx;
		
		.lable{
			margin: 0 16rpx 0 8rpx;
		}
		
		.people,.test-place {
			height: 64rpx;
			line-height: 64rpx;
			padding: 0 16rpx;
			border-radius: $nl-border-radius-main;
		}

		.people:active {
			background-color: #F3F3F3;
		}

		.test-place {
			margin: 0 auto;
		}
		
		.test-place:active {
			background-color: #F3F3F3;
		}
		
		.main {
			color: $nl-color-main;
		}
		
		.submit{
			width: 160rpx;
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
			color: #FFFFFF;
			background-color: $nl-color-main;
			border-radius: $nl-border-radius-main;
			margin-right: 16rpx
		}
		
		.submit:active {
			background-color: #248eff;
		}
	}

	.user-item {
		display: flex;
		align-items: center;
		padding: 24rpx 32rpx;
		border-bottom: 2rpx solid #dcdcdc;

		.name {
			width: 200rpx;
		}

		.delete {
			margin-left: auto;
			padding: 12rpx;
			border-radius: $nl-border-radius-main;
		}

		.delete:active {
			background-color: #f9f9f9;
		}
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
	}
</style>
